package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/sheet"
)

templ SheetStandalone() {
	// Standalone sheet content (without Sheet wrapper)
	@sheet.Content(sheet.ContentProps{
		ID:   "standalone-sheet-demo",
		Side: sheet.SideLeft,
		Open: false,
	}) {
		@sheet.Header() {
			@sheet.Title() {
				Standalone Content
			}
			@sheet.Description() {
				No wrapper component needed
			}
		}
		<div class="flex-1 p-4">
			<p class="text-sm text-muted-foreground">
				Useful for HTMX or dynamic content loading.
			</p>
		</div>
		@sheet.Footer() {
			@sheet.Close(sheet.CloseProps{
				For: "standalone-sheet-demo",
			}) {
				@button.Button(button.Props{
					Variant: button.VariantOutline,
				}) {
					Close
				}
			}
		}
	}
	// Trigger for the standalone sheet
	@sheet.Trigger(sheet.TriggerProps{
		For: "standalone-sheet-demo",
	}) {
		@button.Button(button.Props{
			Variant: button.VariantOutline,
		}) {
			Open Sheet
		}
	}
}
